<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/wesite/view/common/base.jsp"%>
<%@taglib uri="http://www.tag.com/website" prefix="s"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>商品搜索</title>
    <%@ include file="/wesite/view/common/common.jsp"%>
    <link rel="stylesheet" type="text/css" href="${webctx}/css/aui-slide.css" />
    <script type="text/javascript" src="${webctx}/script/aui-tab.js" ></script>
    <script type="text/javascript" src="${webctx}/script/aui-slide.js"></script>
    <script type="text/javascript" src="${webctx}/script/aui-scroll.js"></script>
    <style>
        /*.product-box .search-hd h2{*/
            /*font-size: 0.8rem;*/
        /*}*/
        html, body{
            background: #fff !important;
        }
        .aui-searchbar .aui-searchbar-input{
            background: #f2f2f2;
        }
    </style>
</head>
<body>
    <div class="searchbox">
        <form id="searchForm" action="/we/product/search-result" method="get">
            <div class="aui-searchbar" id="search">
                <div class="aui-searchbar-input">
                    <input type="search" autofocus="autofocus" placeholder="商品名称，通用名，生产厂家" id="search-input" name="querylike" value="${querylike}">
                    <div class="aui-searchbar-clear-btn">
                    </div>
                </div>
                <div class="aui-searchbar-btn" tapmode>搜索</div>
            </div>
        </form>
        <!-- 热门搜索 -->
        <div class="hot-search">
            <div class="search-hd"><h2>热门搜索</h2></div>
            <ul>

                <s:hotword>
                    <c:if test="${type !=2}">
                        <li id="${id}">
                            <input type="hidden" name="shopname" value="${name}">
                            <input type="hidden" name="shopurl" value="${url}">
                            <a href="javascript:seetshop(${id})">${name}</a>
                        </li>
                    <%--<li><a href="/we/product/search-result?querylike=${name}">${name}</a></li>--%>
                    </c:if>
                </s:hotword>
            </ul>
        </div>
        <!-- 猜你喜欢 -->
        <%--<div class="product-box">--%>
            <%--<div class="search-hd size"><h2>猜你喜欢</h2></div>--%>
            <%--<div class="content">--%>
                <%--<ul id="maylikeProductPanel">--%>

                <%--</ul>--%>

                <%--<div id="maylikeProductHolder" style="text-align: center;display: none;"></div>--%>

            <%--</div>--%>
        <%--</div>--%>
    </div>
    <div class="cl"></div>

    <%request.setAttribute("bottomMenuId","search");%>
    <%@ include file="/wesite/view/common/bottom.jsp"%>

</body>
<script type="text/javascript">
    apiready = function(){
        api.parseTapmode();
    }
    var searchBar = document.querySelector(".aui-searchbar");
    var searchBarInput = document.querySelector(".aui-searchbar input");
    var searchBarBtn = document.querySelector(".aui-searchbar .aui-searchbar-btn");
    var searchBarClearBtn = document.querySelector(".aui-searchbar .aui-searchbar-clear-btn");
    if(searchBar){
        searchBarInput.onclick = function(){
            searchBarBtn.style.marginRight = 0;
        }
        searchBarInput.oninput = function(){
            if(this.value.length){
                searchBarClearBtn.style.display = 'block';
                searchBarBtn.classList.add("aui-text-info");
                searchBarBtn.textContent = "搜索";
            }else{
                searchBarClearBtn.style.display = 'none';
                searchBarBtn.classList.remove("aui-text-info");
                searchBarBtn.textContent = "取消";
            }
        }
    }
    searchBarClearBtn.onclick = function(){
        this.style.display = 'none';
        searchBarInput.value = '';
        searchBarBtn.classList.remove("aui-text-info");
        searchBarBtn.textContent = "取消";
    }
    searchBarBtn.onclick = function(){
        var keywords = searchBarInput.value;
        if(keywords.length){
            searchBarInput.blur();
            $("#searchForm").submit();
        }else{
            //this.style.marginRight = "-"+this.offsetWidth+"px";
            searchBarInput.value = '';
            searchBarInput.blur();
        }
    }

    /*设置左侧高度*/
    var topbarHeight = $('header.topbar').height();
    var bottomnavHeight = $('.bottom-nav').height();
    $('.search-type-sidebar,.searchlist-con').height($(window).height()-topbarHeight*2-bottomnavHeight-15);

    /*左侧分类选中样式切换*/
    $('.search-type-sidebar li').on('click',function(){
        $(this).addClass('cur');
        $(this).siblings().removeClass('cur')
    })
</script>


<script>

    var maylikeLoading = false;
    var nextMaylikePageNo = 1;
    function loadMaylike(){
        if(maylikeLoading){
            return false;
        }else{
            maylikeLoading=true;
        }
        $("#maylikeProductHolder").text("正在加载 ...").show();
        var url=apiroot+'/we/product/maylike?pagesize=10&pageno='+nextMaylikePageNo;
        $w.httpRequest({
            url:url,
            data:{},
            ok:function(ret){



                maylikeLoading = false;
                var datas = ret.Data;
                var panel = $("#maylikeProductPanel");
                if(datas&&datas.list&&datas.list.length>0){
                    for(var i=0;i<datas.list.length;i++){
                        var data=datas.list[i];
                        var h = "";
                        var cjia=(data.b_chanjia?data.b_chanjia:"");
                        if(cjia.length>15)cjia=cjia.substr(0,15)+"...";
                        h+=("<li onclick=\"javascript:window.location='"+ctx+"/we/product/"+data.id+"';\">");
                        h+=("<img src='"+getRandomFileserver()+data.photo+"' onerror='this.src=\"" + ctx + "/website/images/noimg.jpg\"' >");
                        h+=("<h3>"+data.productname+' '+(data.attrname||"")+"</h3>");
                        h+=("<span class='company'>"+(cjia||"")+"</span>");
                        h+=("<span class='price'><p><i class='a'>"+((isuserauth && islogin)?'采购价：¥ '+data.price:(!islogin?"登录可见":"审核通过可见"))+"</i></p></span>");
                        h+=("</li>");
                        panel.append(h);
                    }
                    nextMaylikePageNo++;
                    $("#maylikeProductHolder").hide();
                    if(nextMaylikePageNo<=5){
                        return true;
                    }
                }
                nextMaylikePageNo = 0;
                $("#maylikeProductHolder").text("已加载全部");
            }
        })
    }

    $(function(){

        loadMaylike();

        var bottomHeight = $("div.bottom-nav").height()*2;

        var scroll = new auiScroll({
            listen:true, //是否监听滚动高度，开启后将实时返回滚动高度
            distance:bottomHeight //判断到达底部的距离，isToBottom为true
        },function(ret){
            if(ret.isToBottom){
                if(nextMaylikePageNo>0){
                    loadMaylike();
                }
            }
        });
        $("#search-input").trigger("click").focus();
//        $("#search-input").trigger("click").focus(function () {
//            $(".aui-searchbar-input").addClass("searchbar-blue-bg");
//        });
//
//        $("#search-input").blur(function(){
//            $(".aui-searchbar-input").removeClass("searchbar-blue-bg");
//        });

    });
    function seekMedication() {

    }
    function seetshop(id) {
        var shopname = $("#"+id).find("[name='shopname']").val();
        var shopurl =$("#"+id).find("[name='shopurl']").val();
        if(shopurl == "#"){
            var url=ctx+"/we/product/search-result?querylike="+shopname;
            window.location.href=url;
        }else if(shopurl =="" ){
            var urlto=ctx+"/we/product/search-result?querylike="+shopname;
            window.location.href=urlto;
        }else {
            window.location.href=shopurl;
        }
    }
</script>

</html>